"use client";
import { Button, Form, Input } from "antd";

type RegisterForm = {
  username: string;
  password: string;
  confirmPassword: string;
};

export default function Register() {
  const [form] = Form.useForm();

  const onFinish = (values: RegisterForm) => {
    console.log(values);
  };

  return (
    <div className="w-full h-full flex flex-col items-center justify-center bg-white border border-solid border-gray-300 rounded-md p-4">
      <p className="text-xl font-bold text-center">注册</p>
      <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        onFinish={onFinish}
        className="w-full"
      >
        <Form.Item label="用户名" name="username">
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item label="密码" name="password">
          <Input type="password" placeholder="请输入密码" />
        </Form.Item>
        <Form.Item label="确认密码" name="confirmPassword">
          <Input type="password" placeholder="请确认密码" />
        </Form.Item>
        <Button block type="primary" htmlType="submit">
          注册
        </Button>
      </Form>
    </div>
  );
}
